import AddressIcon from "@/components/icons/AddressIcon";
import ShopIcon from "@/components/icons/ShopIcon";
import LikeIcon from "@/components/icons/LikeIcon";
import PhoneIcon from "@/components/icons/PhoneIcon";
import CollectionIcon from "@/components/icons/CollectionIcon";
import classes from "./index.module.css";
import Image from "next/image";
import { useRouter } from "next/router";

const FoodTruckItem = (props) => {
  const {
    id,
    likeNum,
    applicant,
    cnn,
    address,
    collectNum,
    image,
    isCollected,
    isLiked,
    toggleLike,
    toggleCollect,
  } = props;

  const router = useRouter();
  const exploreHandler = (e) => {
    router.push(`/food-trucks/${id}`);
  };

  const likeHandler = (e) => {
    e.stopPropagation();
    toggleLike && toggleLike({ id });
  };

  const collectionHandler = (e) => {
    e.stopPropagation();

    toggleCollect && toggleCollect({ id });
  };

  return (
    <li className={classes.item} onClick={exploreHandler}>
      <Image src={"/" + image} alt={applicant} width={250} height={160} />
      <div className={classes.content}>
        <div className={classes.summary}>
          <h2>{applicant}</h2>
          <div className={classes.date}>
            <PhoneIcon />
            <div>{cnn}</div>
          </div>
          <div className={classes.address}>
            <AddressIcon />
            <div>{address}</div>
          </div>
          {/* <div className={classes.foodItems}>
            <ShopIcon />
            <div>{foodItems}</div>
          </div> */}
        </div>
        <div className={classes.actions}>
          <div
            className={`${classes.likeNum} ${isLiked ? classes.liked : ""}`}
            onClick={likeHandler}
          >
            <LikeIcon />
            <div>{likeNum}</div>
          </div>
          <div
            className={`${classes.collection} ${
              isCollected ? classes.collected : ""
            }`}
            onClick={collectionHandler}
          >
            <CollectionIcon />
            <div>{collectNum}</div>
          </div>
        </div>
      </div>
    </li>
  );
};

export default FoodTruckItem;
